<template>
  <div id="rootgoods-top">
    <div class="icon">
        <div class="icon-left"></div>
        <div class="icon-right" @click="funw4()"></div>
    </div>
    <div class="goods">
  <van-swipe @change="onChange">
  <van-swipe-item class="lunbo"  v-for="(item,index) in list" :key="index"><img :src="item.src" alt=""></van-swipe-item>

  <template #indicator>
    <div class="custom-indicator">{{ current + 1 }}/6</div>
  </template>
</van-swipe>
<ul class="list" v-show="showinfo">
    <li class="listson listson-border"  @click="funw7()">
        <van-icon class="van-icon" name="wap-home-o" />
        <span >首页</span>
    </li>
    <li class="listson listson-border">
        <van-icon class="van-icon" name="search" />
        <span>搜索</span>
    </li>
    <li class="listson listson-border" @click="funw8()">
        <van-icon class="van-icon" name="apps-o" />
        <span>分类</span>
    </li>
    <li class="listson listson-border" @click="funw9()">
        <van-icon class="van-icon" name="shopping-cart-o" />
        <span>购物车</span>
    </li>
    <li class="listson" @click="funw10()">
        <van-icon class="van-icon" name="user-o" />
        <span>我的</span>
    </li>
</ul>
    </div>
    <!-- <div class="leader">
      <van-icon class="icon1" name="arrow-left" />
      <van-tabs v-model="active" class="leader-center">
  <van-tab title="商品"></van-tab>
  <van-tab title="评价"></van-tab>
  <van-tab title="参数"></van-tab>
  <van-tab title="详情"></van-tab>
      </van-tabs>
      <div class="more1"></div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list:[],
      showinfo:""
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    funw4(){
      this.showinfo= !this.showinfo;
    },
    funw7(){
      this.$router.push("/myhome")
    },
    funw8(){
      this.$router.push("/second")
    },
    funw9(){
      this.$router.push("/")
    },
    funw10(){
      this.$router.push("/wode")
    }
  },
  mounted(){
    this.$http({
      url:"http://localhost:3000/Detaills",
      method:"GET"
    }).then((res)=>{
      this.list = res.data;

    })
   }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.rootgoods-top{
    width: 23.4375rem;
    height: 23.4375rem;
    position: relative;
}
.icon{
    display: flex;
    height: 2.275rem;
}
.icon-left{
    background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_back_grey.png);
    background-size:1.625rem 1.625rem ;
    width: 1.625rem;
    height: 1.625rem;
    margin: .475rem 1.9625rem;
}
.icon-right{
    background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_more_grey.png);
    background-size:1.625rem 1.625rem ;
    width: 1.625rem;
    height: 1.625rem;
    margin: .475rem 0 0 14.425rem;
}
.goods{
    width:20.75rem ;
    height: 20.75rem;
    margin: 0 2.3125rem;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
img{
    width:18.75rem ;
    height: 18.75rem;   
}
ul{
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.108);
    width: 108px;
    height: 13.0625rem;
    position: absolute;
    top: 2.9rem;
    left: 14.25rem;
    background-color: rgba(255, 255, 255, 0.649);
}
.listson{
    width: 6.75rem;
    height: 2.625rem;
    text-align: left;
    line-height:2.625rem ; 
}
.listson-border{
    border-bottom:2px solid rgba(255, 255, 255, 0.108); ;
}
.listson .van-icon{
    margin-left: .825rem;
}
li span{
    margin-left: .625rem;
}
/* .leader{
  width: 100%;
  height: 2.5625rem;
  background-color: white;
  display: flex;
  position: absolute;
  top:.3125rem;
  display: none;
}
.leader-center{
  width: 70%;
  margin-left:.5rem ;
}
.icon1{
  margin: .9rem 0 0 2.2rem;
}
.more1{
  width: 1.5625rem;
  height: 1.5625rem;
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_header_nav.png);
  background-size:1.5625rem ;
  margin-top:.3125rem ;
} */
</style>